import React from 'react'

class BestMatch extends React.Component {
    constructor() {
        super()
        this.state = {
            oldArr: [false, false, false, false]
        }
    }
    componentDidMount() {
        // console.log(this.props.state);
        // 由于第一次进入页面state为空，所以需要判断一下
        if (!this.props.state) {
            this.props.searchRequest('林俊杰')
        } else {
            this.props.searchRequest(this.props.state)
        }
    }

    playMusic(id, index) {
        // console.log(e.target.innerText);
        // console.log(id);
        // console.log(index);
        //清除以播放的时长
        this.props.clearTimenow()
        this.props.getsingle(id)
        this.props.getMusicURLApi(id)
        this.props.playOrPause(true)
        if (this.state.oldArr[index]) {
            for (let i = 0; i < this.state.oldArr.length; i++) {
                this.state.oldArr = [false, false, false, false];
                // this.state.oldArr[index] = true
                this.props.playOrPause(!this.props.audio)
            }
        } else {
            for (let i = 0; i < this.state.oldArr.length; i++) {
                this.state.oldArr = [false, false, false, false];
                this.state.oldArr[index] = true
            }
        }
    }

    render() {
        // console.log(this.props.SearchBox);
        // console.log(this.props);
        let lis = '';
        try {
            let arr = this.props.SearchBox;
            // 播放按钮的样式
            lis = arr.map((item, index) => {
                return (
                    <li key={item.id} className='mxx_bestMatch_result' onClick={this.playMusic.bind(this, item.id, index)}>
                        <img src={require('../../../assets/mxx_images/music.png')} alt="" />
                        <span>{item.name}</span>
                        <img src={this.state.oldArr[index] ? require('../../../assets/mxx_images/bofang1.png') : require('../../../assets/mxx_images/start.png')} alt="" />
                    </li>
                )
            })
        } catch (error) {
            alert('Error')
        }
        return (<div>
            <div className='mxx_bestMatch'>最佳匹配</div>
            <ul>
                {lis}
            </ul>
        </div>
        )
    }
}

export default BestMatch